<script type="text/javascript">
    var paginationTotal = 1;//记录总数
    $(function() {
        initData(0);
    });

    function loadData(page, pageSize) {
        var pu_id = $('[name=pu_id]').val();
        var customer_id = $('[name=customer_id]').val();
        $.ajax({
            type: "POST",
            async: false,
            dataType: "json",
            url: "/customer/customer/planusagedetail", //请求的处理url
            data:{
                'page':page,'pageSize':pageSize,
                'pu_id':pu_id,'customer_id':customer_id
            },
            success: function(json) {
                var list = "";
                paginationTotal = json.count;
                if (json.ask != 1) {
                    list = "<td colspan='5' class=''>&nbsp;<{$lang.no_data}></td>";
                } else {
                    //var i = page==1 ? 1 : pageSize * (page-1)+1;
                    $.each(json.result, function(key, val) {
                        if ((key + 1) % 2 == 1) {
                            list += "<tr class=''>";
                        } else {
                            list += "<tr class='even-tr'>";
                        }
                        list += "<td >" + val.ref_id + "</td>";
                        list += "<td >" + val.type + "</td>";
                        list += "<td >" + val.count + "</td>";
                        list += "<td >" + val.current_count + "</td>";
                        list += "<td >" + val.created + "</td>";
                        list += "</tr>";
                    });
                }
                $("#list").html(list);
            }
        });
    }

    function switchTab(id) {
        for (var i = 0; i <= 1; i++) {
            $("#tab-" + i).removeClass('tabs-head-active');
            $("#plan-" + i).hide();
        }
        $("#tab-" + id).addClass('tabs-head-active');
        $("#tab-" + id).show();
        $("#plan-" + id).show();
        if (id == '1') {
            loadplanlist()
        }//加载<{$lang.plan}><{$lang.list}>
    }

    //<{$lang.plan}><{$lang.detail}>
    function plan_usage_detail(pu_id) {
        var customer_id = $('[name=customer_id]').val();
        if (pu_id == '') {
            return false;
        }
        var url = '/customer/customer/getplanusagedetail/pu_id/' + pu_id + '/customer_id/' + customer_id;
        window.parent.$('<iframe id="ifr_order_product_list" name="ifr_order_product_list" src="' + url + '" />').dialog({
            title: '<{$lang.plan}><{$lang.detail}>',
            autoOpen: true,
            width: 760,
            modal: false,
            resizable: false,
            position:'top',
            autoResize: true,
            close:function() {
                $(this).remove();
            }
        }).width(730).height(550);
    }
</script>
<style type="text/css">
    .div-head span {
        border: 1px solid #E6E6E6;
        height: 30px;
        padding: 3px;
        line-height: 30px;
    }

    .div-head span a {
        text-decoration: none;
        font-weight: bold;
        color: #000;
    }

    .tabs-head-active {
        background: #C9C9C9;
    }

    #iTitle div {
        display: inline-block;
        float: left;
        padding: 0 0 0 10px;
        margin-bottom: 12px;
    }

    .mySelect {
        height: 22px;
        border: 1px solid #CCCCCC;
    }

    #iTitle input {
        height: 20px;
        border: 1px solid #CCCCCC;
    }

    .current {
        border: 0px solid #C9C9C9;
    }

    table {
        border-collapse: collapse;
    }

    table.myTab th {
        background: #f1f6f9 url(/images/left-menu-li.gif) repeat-x left top
    }

    .myTab td {
        padding: 3px;
        border: 1px solid #AECED9;
        text-align: center
    }

    .myTab tr:hover {
        color: #2F82A0;
        background: #FAFAFA
    }

    .myTab th {
        padding: 5px;
        border: 1px solid #AECED9;
        text-align: center;
    }

    .even-tr {
        background: #E6F3F9
    }

    .hover-tr {
        background: #318DAC;
        color: white
    }

    .editTab td {
        padding: 1px;
    }

    .current tr {
        background: none repeat scroll 0 0 #F2F8FD;

    }

    .current tr td {
        border: 1px solid #C9C9C9;
        height: 30px;
        line-height: 30px;
    }

    .tdleft {
        width: 12%;
        font-weight: bold;
        text-align: right;
        padding-right: 5px;
    }

    .tdright {
        width: 20%;
        text-align: left;
        padding-left: 5px;
        font-family: Verdana;
    }

    .tdright span {
        color: red;
    }

    span.detail {
        float: right;
    }
</style>
<!--<{$lang.current}><{$lang.plan}>-->
<div id="content">
    <input type="hidden" name="customer_id" id="customer_id" value="<{$customer_id}>"/>
    <input type="hidden" name="pu_id" id="pu_id" value="<{$pu_id}>"/>

    <div class="div-head"><span id="tab-0" class="tabs-head-active"><a
            href="javascript:switchTab(0);"><{$lang.current}><{$lang.plan}></a></span><span id="tab-1"><a href="javascript:switchTab(1);">以往<{$lang.plan}></a></span>
    </div>
    <!--<{$lang.current}><{$lang.plan}>-->
    <div id="plan-0">
        <table width="100%" class="current">
            <tr>
                <td id="dnidInfo" colspan="6" align="left"><span style="font-weight:bold;color:red;margin-left:20px;"><{$customer_id}></span>
                    <{$lang.current}>使用<{$lang.plan}>
                </td>
            </tr>
            <tr>
                <td class="tdleft"><{$lang.plan}>总价:</td>
                <td class="tdright"><{$PlanRows.total}></td>
                <td class="tdleft">升降级<{$lang.status}>:</td>
                <td class="tdright"><{$PlanRows.upgrade}></td>
                <td class="tdleft"><{$lang.payment}>日:</td>
                <td class="tdright"><{$PlanRows.billing_date}></td>
            </tr>
            <tr>
                <td class="tdleft">Item<{$lang.quantity}>:</td>
                <td class="tdright"><span><{$PlanUsageRows.item_used}></span> / <{$PlanUsageRows.item_qty}></td>
                <td class="tdleft"><{$lang.sku}><{$lang.quantity}>:</td>
                <td class="tdright"><span><{$PlanUsageRows.<{$lang.sku}>_used}></span> / <{$PlanUsageRows.<{$lang.sku}>_qty}></td>
                <td class="tdleft">托盘<{$lang.quantity}>:</td>
                <td class="tdright"><span><{$PlanUsageRows.pallet_used}></span> / <{$PlanUsageRows.pallet_qty}></td>
            </tr>
            <tr>
                <td class="tdleft"><{$lang.create}><{$lang.time}>:</td>
                <td class="tdright"><{$PlanRows.created}></td>
                <td class="tdleft">失效<{$lang.time}>:</td>
                <td class="tdright"><{$PlanRows.expired}></td>
                <td class="tdleft"><{$lang.last}><{$lang.update}><{$lang.time}>:</td>
                <td class="tdright"><{$PlanUsageRows.last_update}></td>
            </tr>
        </table>
        <div style="height:10px;font-size:0;width:100%;clear:both;"></div>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="myTab">
            <thead>
            <tr>
                <th><{$lang.referNo}></th>
                <th><{$lang.type}></th>
                <th>用量</th>
                <th>所剩<{$lang.quantity}></th>
                <th><{$lang.create}><{$lang.time}></th>
            </tr>
            </thead>
            <tbody id="list">
            </tbody>
        </table>
        <div class="pagination"></div>
    </div>
    <!--end <{$lang.current}><{$lang.plan}>-->
    <!--曾经使用的<{$lang.plan}>-->
    <div id="plan-1" style="display:none;">
        <table width="100%" class="current">
            <{section name="loop" loop=$planusagelist}>
            <tr>
                <td colspan="6" align="left" style="padding:0 10px;">
                    <{$lang.plan}>ID:<{$planusagelist[loop].plan_id}><span class="detail"><a
                        href="javascript:plan_usage_detail('<{$planusagelist[loop].pu_id}>');"> <{$lang.plan}>使用<{$lang.detail}></a></span>
                </td>
            </tr>
            <tr>
                <td class="tdleft"><{$lang.plan}>总价:</td>
                <td class="tdright"><{$planusagelist[loop].total}></td>
                <td class="tdleft">升降级<{$lang.status}>:</td>
                <td class="tdright"><{$planusagelist[loop].upgrade}></td>
                <td class="tdleft">扣费<{$lang.time}>:</td>
                <td class="tdright"><{$planusagelist[loop].billing_date}></td>
            </tr>
            <tr>
                <td class="tdleft">Item<{$lang.quantity}>:</td>
                <td class="tdright"><span><{$planusagelist[loop].item_used}></span> / <{$planusagelist[loop].item_qty}>
                </td>
                <td class="tdleft"><{$lang.sku}><{$lang.quantity}>:</td>
                <td class="tdright"><span><{$planusagelist[loop].<{$lang.sku}>_used}></span> / <{$planusagelist[loop].<{$lang.sku}>_qty}>
                </td>
                <td class="tdleft">托盘<{$lang.quantity}>:</td>
                <td class="tdright"><span><{$planusagelist[loop].pallet_used}></span> /
                    <{$planusagelist[loop].pallet_qty}>
                </td>
            </tr>
            <tr>
                <td class="tdleft">Item超出<{$lang.quantity}>:</td>
                <td class="tdright"><{$planusagelist[loop].item_add_qty}></td>
                <td class="tdleft"><{$lang.sku}>超出<{$lang.quantity}>:</td>
                <td class="tdright"><{$planusagelist[loop].<{$lang.sku}>_add_qty}></td>
                <td class="tdleft">托盘超出<{$lang.quantity}>:</td>
                <td class="tdright"><{$planusagelist[loop].pallet_add_qty}></td>
            </tr>

            <tr>
                <td class="tdleft"><{$lang.create}><{$lang.time}>:</td>
                <td class="tdright"><{$planusagelist[loop].created}></td>
                <td class="tdleft">失效<{$lang.time}>:</td>
                <td class="tdright"><{$planusagelist[loop].expired}></td>
                <td class="tdleft"><{$lang.last}><{$lang.update}><{$lang.time}>:</td>
                <td class="tdright"><{$planusagelist[loop].last_update}></td>
            </tr>
            <{/section}>
        </table>
    </div>
    <!---end 曾经使用的<{$lang.plan}>-->
</div>


